<template>
	<view class="bg-white pd-20">
		<!-- range -->
		<view v-if="mode == 'range'" class="flex justify-between" style="padding: 8px; background-color: #f3c45d; color: #fff">
			<view class="flex">
				<text>{{ param.dataTimeRange[0] }}</text>
				<text style="margin: 0 10rpx; display: inline-block">至</text>
				<text class="ml-10">{{ param.dataTimeRange[1] }}</text>
			</view>
			<view v-if="radios.length > 0" @click="showPopup = true" class="screen-btn">筛选</view>
		</view>

		<!-- single -->
		<view v-else class="data-box" @click="showCalendar = true">
			<u-icon labelSize="12" name="arrow-left-double" label="前一天" @tap.stop="changeDataRangeTime('prev')"></u-icon>
			<view style="margin-right: 10rpx; margin-left: 20rpx">{{ param.dataTimeRange }}</view>
			<uni-icons custom-prefix="custom-icon" type="custom-icon-xiajiantou" size="20" color="#fff" style="margin-right: 20rpx" />
			<u-icon labelSize="12" name="arrow-right-double" label="后一天" labelPos="left" @tap.stop="changeDataRangeTime('next')"></u-icon>
		</view>

		<!-- range -->
		<view style="padding-left: 8px; padding-top: 20rpx" v-if="mode == `range`">
			<check-box checkType="single" activeColor="#fbbd08" :checkOptions.sync="checkOptions" @checkChange="changeDataRange" />
		</view>

		<slot></slot>

		<!--  single table -->
		<view v-if="!isTab" class="zb-tb-container" :style="{ height: height + 'rpx' }">
			<zb-table
				@rowClick="clickRow"
				ref="zbTable"
				:pullUpLoading="pullUpLoading"
				:isShowLoadMore="isShowLoadMore"
				:data="reportData"
				:columns="columns"
				:stripe="false"
				:fit="true"
			/>
		</view>

		<!-- tab table -->
		<block v-else>
			<view class="tabs">
				<u-tabs
					:list="tabList"
					lineColor="#F3C45D"
					lineWidth="30"
					keyName="text"
					:activeStyle="{
						color: `#F3C45D`
					}"
					@click="onTabClick($event)"
				></u-tabs>
			</view>
			<view class="content">
				<slot name="l"></slot>
				<view class="zb-tb-container" :style="{ height: height + 'rpx' }">
					<zb-table
						ref="tabZbTable"
						:fit="true"
						:columns="tabList[type].columns"
						:stripe="false"
						:data="tabList[type].reportData"
						:isShowLoadMore="isTabShowLoadMore"
						:pullUpLoading="tabPullUpLoading"
						:border="true"
					/>
				</view>
			</view>
		</block>

		<!-- popup -->
		<u-popup :show="showPopup" mode="right" :closeable="true" @close="showPopup = false" :safeAreaInsetTop="true" closeIconPos="top-left" zIndex="10070">
			<view class="poup-content">
				<u-form :model="param" ref="myForm" labelPosition="top" labelWidth="auto">
					<u-form-item label="日期" prop="dataTimeRange">
						<view>{{ param.dataTimeRange[0] }} 至 {{ param.dataTimeRange[1] }}</view>
						<view class="mt-20">
							<check-box checkType="single" activeColor="#fbbd08" :checkOptions.sync="checkOptions" @checkChange="changeDataRange" />
						</view>
					</u-form-item>
					<u-form-item v-if="radios.length > 0" :label="label">
						<view class="mt-10">
							<check-box checkType="single" activeColor="#fbbd08" :checkOptions="radios" @checkChange.sync="changeType" />
						</view>
					</u-form-item>
				</u-form>
				<slot name="li"></slot>
				<view class="bottom-btn-group">
					<view class="btn-edit" @click="onResetFields">重置</view>
					<view class="btn-edit" @click="onSearch">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- calendar -->
		<u-calendar
			:default-date="currentMonth"
			color="#f3c45d"
			:show="showCalendar"
			:mode="mode"
			@confirm="confirm"
			axRange="maxRange"
			:allowSameDay="true"
			:monthNum="15"
			@close="showCalendar = false"
		/>
	</view>
</template>
<script>
import date from '@/utils/date';
import { utoast } from '../../utils/uniUtils';
import { getPreviousDay, getNextDayOrNull, getFormattedDate } from '@/utils/date';
export default {
	name: 'LiReport',
	props: {
		param: {
			required: true
		},
		label: {
			required: true,
			default: '统计方式'
		},
		radios: {
			default: []
		},
		mode: {
			type: String,
			default: `range`
		},
		maxRange: {
			default: 31
		},
		columns: {
			required: true
		},
		reportData: {
			default: []
		},
		typeName: {
			default: 'appointType',
			type: String
		},
		isTab: {
			default: false,
			type: Boolean
		},
		tabList: {
			default: function () {
				return [];
			},
			type: Array
		},
		isShowLoadMore: {
			default: false,
			type: Boolean
		},
		// pullUpLoading: {},
		isTabShowLoadMore: {
			default: false,
			type: Boolean
		},
		tabPullUpLoading: {},
		height: {
			type: Number,
			default: 300
		}
	},
	watch: {
		showCalendar(newVal) {
			this.$emit('openPopup', newVal);
		}
	},
	data() {
		return {
			type: 0,
			showCalendar: false,
			showPopup: false,
			checkOptions: [
				{
					name: '今天',
					dateRange: [date.getDate(0), date.getDate(0)],
					selected: true
				},
				{ name: '昨天', dateRange: [date.getDate(-1), date.getDate(-1)] },
				{ name: '近七天', dateRange: [date.getDate(-7), date.getDate(-1)] },
				{ name: '近30天', dateRange: [date.getDate(-30), date.getDate(-1)] },
				{
					name: '本月',
					dateRange: [date.getCurrentMonth().startDate, date.getCurrentMonth().endDate]
				},
				{ name: '自定义', isUnrestricted: true }
			],
			currentDate: getFormattedDate(),
			currentMonth: getFormattedDate()
		};
	},
	methods: {
		async pullUpLoading(done) {
			// console.log("this", this);
			let that = this.$children[0];
			/*    if (that.tableData.length < that.total) {

      } */
			/*       this.$children[0].$children[0] */
			/*       console.log("that", that);
      console.log("that.$refs.zbTable", that.$refs.zbTable);
      console.log("that.reportData.length", that.reportData.length); */

			if (that.$parent.total > that.reportData.length) {
				console.log('that.reportData.length', that.reportData.length);
				console.log('that.total', that.$parent.total);
				that.$emit('update:param', Object.assign({}, that.param, { pageNum: that.param.pageNum + 1 }));
				await that.$parent.getPageData();
				console.log('that.reportData.length', that.reportData.length);
				that.$refs.zbTable.pullUpCompleteLoading();
			} else {
				that.$refs.zbTable.pullUpCompleteLoading('ok');
			}
		},
		async changeDataRange(value) {
			console.log(value, 'value');
			if (value[0].isUnrestricted) {
				this.showCalendar = true;
			} else {
				this.$parent.tableData = this.$parent.$options.data().tableData;
				this.$emit(
					'update:param',
					Object.assign({}, this.param, {
						dataTimeRange: value[0].dateRange,
						pageNum: 1
					})
				);
				if (!this.showPopup) {
					await this.$parent.getPageData();
				}
			}
		},

		async onResetFields() {
			this.checkOptions = this.$options.data().checkOptions;
			this.$parent.param = this.$parent.$options.data().param;
			this.$parent.tableData = this.$parent.$options.data().tableData;
			if (this.radios.length > 0) {
				this.$parent.radios = this.$parent.$options.data().radios;
			}
			this.showPopup = false;
			await this.$parent.getPageData();
			utoast('重置成功！');
		},

		/// search event
		async onSearch() {
			this.showPopup = false;
			this.$parent.tableData = this.$parent.$options.data().tableData;
			this.$emit(
				'update:param',
				Object.assign({}, this.param, {
					pageNum: 1
				})
			);
			await this.$parent.getPageData();
			this.$emit('afterRefreshData', this.reportData);
		},

		//calendar confirm event
		async confirm(e) {
			console.log(e, this.mode);
			this.$parent.tableData = this.$parent.$options.data().tableData;
			this.$emit(
				'update:param',
				Object.assign({}, this.param, {
					dataTimeRange: this.mode == 'range' ? [e[0], e[e.length - 1]] : e[0],
					pageNum: 1
				})
			);
			this.showCalendar = false;
			this.currentDate = e[0];
			await this.$parent.getPageData();
		},

		changeType(e) {
			this.$emit(
				'update:param',
				Object.assign({}, this.param, {
					[this.typeName]: e[0].value
				})
			);
			this.$emit('afterTabClick', {
				tabIdx: e.index
			});
		},
		onTabClick(e) {
			this.type = e.index;
			this.$parent.tabIdx = e.index;
		},
		clickRow(row, index) {
			this.$emit('clickRow', { row, index });
		},
		async changeDataRangeTime(type) {
			if (type === 'next') {
				const nextDate = getNextDayOrNull(this.currentDate);
				if (!nextDate) return;
				this.currentDate = nextDate;
			} else {
				const startDate = getPreviousDay(this.currentDate);
				this.currentDate = startDate;
			}
			this.$parent.tableData = this.$parent.$options.data().tableData;
			this.currentMonth = this.currentDate;
			this.$emit(
				'update:param',
				Object.assign({}, this.param, {
					dataTimeRange: this.currentDate,
					pageNum: 1
				})
			);
			await this.$parent.getPageData();
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/static/styles/propupContent.scss';

$white: #fff;
$l-btn-save-bgc: #f3c45d;

.bottom-btn-group {
	display: flex;
	align-items: center;
	position: fixed;
	background-color: $white;
	left: 0rpx;
	right: 0rpx;
	bottom: 0;
	height: 70px;

	.btn-edit {
		flex: 1;
		margin-left: 15px;
		margin-right: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 49px;
		font-size: 18px;
		background-color: $l-btn-save-bgc;
		letter-spacing: 3px;
		color: $white;
		font-weight: bold;
		border-radius: 10px;
	}
}

.zb-tb-container {
	height: 300px;
	margin: 10rpx auto;
	// border: 2rpx solid #ccc;
	width: 95%;
}
.screen-btn {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 0 20rpx;
	color: #f3c45d;
}
.data-box {
	padding: 5px 0;
	justify-content: center;
	display: flex;
	align-items: center;
	background-color: $color-primary;
	color: #fff;
}
</style>
